import React, { useState } from 'react';
import { Space, Card } from 'antd';
import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
import { Switch } from '../index';

const App: React.FC = () => {
  // 基础开关状态
  const [basicNormal1, setBasicNormal1] = useState(false);
  const [basicNormal2, setBasicNormal2] = useState(true);
  const [basicHover1, setBasicHover1] = useState(false);
  const [basicHover2, setBasicHover2] = useState(true);
  const [basicActive1, setBasicActive1] = useState(false);
  const [basicActive2, setBasicActive2] = useState(true);

  // 带图标开关状态
  const [iconNormal1, setIconNormal1] = useState(false);
  const [iconNormal2, setIconNormal2] = useState(true);
  const [iconHover1, setIconHover1] = useState(false);
  const [iconHover2, setIconHover2] = useState(true);
  const [iconActive1, setIconActive1] = useState(false);
  const [iconActive2, setIconActive2] = useState(true);

  // 带文字开关状态
  const [textNormal1, setTextNormal1] = useState(false);
  const [textNormal2, setTextNormal2] = useState(true);
  const [textHover1, setTextHover1] = useState(false);
  const [textHover2, setTextHover2] = useState(true);
  const [textActive1, setTextActive1] = useState(false);
  const [textActive2, setTextActive2] = useState(true);

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      {/* 基础开关 */}
      <Card title="基础开关" size="small">
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          {/* Normal 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>normal</div>
            <Space size="large">
              <Switch checked={basicNormal1} onChange={setBasicNormal1} />
              <Switch checked={basicNormal2} onChange={setBasicNormal2} />
            </Space>
          </div>

          {/* Hover 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>
              hover
              <span style={{ marginLeft: 8, color: '#aaa' }}>💡 将鼠标移动到开关上查看悬浮效果</span>
            </div>
            <Space size="large">
              <Switch checked={basicHover1} onChange={setBasicHover1} />
              <Switch checked={basicHover2} onChange={setBasicHover2} />
            </Space>
          </div>

          {/* Active 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>
              active
              <span style={{ marginLeft: 8, color: '#aaa' }}>💡 点击开关时查看激活效果</span>
            </div>
            <Space size="large">
              <Switch checked={basicActive1} onChange={setBasicActive1} />
              <Switch checked={basicActive2} onChange={setBasicActive2} />
            </Space>
          </div>

          {/* Disable 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>disable</div>
            <Space size="large">
              <Switch checked={false} disabled />
              <Switch checked={true} disabled />
            </Space>
          </div>
        </Space>
      </Card>

      {/* 带图标开关 */}
      <Card title="带图标开关" size="small">
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          {/* Normal 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>normal</div>
            <Space size="large">
              <Switch
                checked={iconNormal1}
                onChange={setIconNormal1}
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
              />
              <Switch
                checked={iconNormal2}
                onChange={setIconNormal2}
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
              />
            </Space>
          </div>

          {/* Hover 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>
              hover
              <span style={{ marginLeft: 8, color: '#aaa' }}>💡 将鼠标移动到开关上查看悬浮效果</span>
            </div>
            <Space size="large">
              <Switch
                checked={iconHover1}
                onChange={setIconHover1}
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
              />
              <Switch
                checked={iconHover2}
                onChange={setIconHover2}
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
              />
            </Space>
          </div>

          {/* Active 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>
              active
              <span style={{ marginLeft: 8, color: '#aaa' }}>💡 点击开关时查看激活效果</span>
            </div>
            <Space size="large">
              <Switch
                checked={iconActive1}
                onChange={setIconActive1}
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
              />
              <Switch
                checked={iconActive2}
                onChange={setIconActive2}
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
              />
            </Space>
          </div>

          {/* Disable 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>disable</div>
            <Space size="large">
              <Switch
                checked={false}
                disabled
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
              />
              <Switch
                checked={true}
                disabled
                checkedChildren={<CheckOutlined />}
                unCheckedChildren={<CloseOutlined />}
              />
            </Space>
          </div>
        </Space>
      </Card>

      {/* 带文字开关 */}
      <Card title="带文字开关" size="small">
        <Space direction="vertical" size="middle" style={{ width: '100%' }}>
          {/* Normal 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>normal</div>
            <Space size="large">
              <Switch
                checked={textNormal1}
                onChange={setTextNormal1}
                checkedChildren="开"
                unCheckedChildren="关"
              />
              <Switch
                checked={textNormal2}
                onChange={setTextNormal2}
                checkedChildren="开"
                unCheckedChildren="关"
              />
            </Space>
          </div>

          {/* Hover 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>
              hover
              <span style={{ marginLeft: 8, color: '#aaa' }}>💡 将鼠标移动到开关上查看悬浮效果</span>
            </div>
            <Space size="large">
              <Switch
                checked={textHover1}
                onChange={setTextHover1}
                checkedChildren="开"
                unCheckedChildren="关"
              />
              <Switch
                checked={textHover2}
                onChange={setTextHover2}
                checkedChildren="开"
                unCheckedChildren="关"
              />
            </Space>
          </div>

          {/* Active 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>
              active
              <span style={{ marginLeft: 8, color: '#aaa' }}>💡 点击开关时查看激活效果</span>
            </div>
            <Space size="large">
              <Switch
                checked={textActive1}
                onChange={setTextActive1}
                checkedChildren="开"
                unCheckedChildren="关"
              />
              <Switch
                checked={textActive2}
                onChange={setTextActive2}
                checkedChildren="开"
                unCheckedChildren="关"
              />
            </Space>
          </div>

          {/* Disable 状态 */}
          <div>
            <div style={{ marginBottom: 8, fontSize: 12, color: '#999' }}>disable</div>
            <Space size="large">
              <Switch checked={false} disabled checkedChildren="开" unCheckedChildren="关" />
              <Switch checked={true} disabled checkedChildren="开" unCheckedChildren="关" />
            </Space>
          </div>
        </Space>
      </Card>
    </Space>
  );
};

export default App;

